Layout Shift
Layout shiftの定義などについて書く
どうなったら問題か、どう改善するか、どう計測するかなどはここには書かないmrsekut.icon
A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
ざっくりいうと
(時間軸上に)連続したフレームがあるが、
2つのフレーム間で、
要素の開始位置に、
差異があればlayout shift
Layout shifts are defined by the Layout Instability API, which reports layout-shift entries any time an element that is visible within the viewport changes its start position (for example, its top and left position in the default writing mode) between two frames.
つまりスクロールとか、ボタン押したとか、のたびにも計算されるってこと #?? 既存の要素が開始位置を変更した場合に起こる
動いたとしても開始位置が動いてなかったら耐える
新しい要素がDOMに追加されたとか、既存の要素のサイズが変更されたときは計算されない
Layout Shiftの算出方法
具体例もいくつか書いてるmrsekut.icon
Layout Instability APIによって定義される
layout shift score = impact fraction * distance fraction
imact fractionとは
図付きの説明があるので何となく分かるmrsekut.icon
The union of the visible areas of all unstable elements for the previous frame and the current frame—as a fraction of the total area of the viewport—is the impact fraction for the current frame.
どれだけの大きさのelementか
distance fractionとは
図付きの説明があるので何となく分かるmrsekut.icon
不安定な要素が移動した最大距離をviewportの幅高さの大きい方で割ったもの
どれだけ動いたか
最初はimapact fractionのみで算出しようとしていたが、大きい要素が少し動いただけでめちゃくちゃ影響するので、distance fractionをかけることでペナルティが上がりすぎるのをマシにしたらしい